<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>关系导图</title>
    <link rel="stylesheet" href="__STATIC__/relation/css/bootstrap.min.css" />
    <link rel="stylesheet" href="__STATIC__/relation/css/jquery.jOrgChart.css" />
    <link rel="stylesheet" href="__STATIC__/relation/css/custom.css" />
    <style>
        /* .line.tags {
            height: 100px;
        } */
        body{
            overflow: hidden;
            width: 100vw; height: 100vh;
        }
        #box { width: 100vw; height: 100vh; cursor: move; position: absolute; top: 0px; left: 0px;}
        .jOrgChart .node{
            height: 220px;
            width: 200px;
            padding-top: 10px;
        }
        .node p {
            font-family: tahoma;
            font-size: 14px;
            line-height: 16px;
            padding: 2px;
            padding-left: 10px;
            text-align: left;
        }
        #chart{
            /*transform: scale(0.5);*/
        }
    </style>
    <script src="__TMPL__/public/assets/js/jquery-1.10.2.min.js"></script>
    <script src="__STATIC__/relation/jquery-ui.min.js"></script>
    <script src="__STATIC__/relation/jquery.jOrgChart.js"></script>
    <script src="__STATIC__/relation/Tdrag.min.js"></script>
    <script>
        function renderTag() {
            var tag = $($(".tags").html()),
                tagHeight = null,
                tagBox = $(".jOrgChart>table tr:eq(1)>td");
            //tagBox.append(tag);
            tagHeight = tag.outerHeight();

            tagBox.css({
                position: "relative",
                height: tagHeight + "px"
            })
            tagBox.children(".line.down").css({
                height: "100%"
            });
            tagBox.css({
                height: 60 + "px"
            })
            tag.css({
                position: "absolute",
                right: 0 + "px",
                top: "50%",
                marginTop: -tagHeight / 2 + "px"
            })
            tag.children(".line").css({
                width: tag.position().left - tagBox.outerWidth() / 2 + "px",
                right: tag.outerWidth() - 4 + "px"
            })
        }
        jQuery(document).ready(function() {
            // $("#org").jOrgChart({
            //     chartElement: '#chart',
            //     dragAndDrop: true
            // });
            renderTag();
            // $('.jOrgChart div.node').on('click', function(event) {
            //     console.log(1)
            //     event.preventDefault();
            // });

        });
    </script>
</head>

<body>
    <div style="position: fixed;top:10px;left:10px;z-index: 9999;">
      <input type="text" name="keyword" style="border: 1px solid rgb(0, 0, 0);height: 30px;outline: none;padding: 0;padding-left: 10px;">
      <button onclick="test()" style="height:30px;padding:0 10px;background:#000;color:#fff">提交</button>
    </div>

    <ul id="org" style="display:none">
        <!-- <li class="284669">
            <div>
                <p>手机：15621</p>
                <p>邮箱：liheyue001@163.com</p>
                <p>等级：15621</p>
                <p>董事：15621</p>
                <p>总业绩：15621</p>
                <p>待结算业绩：15621</p>
                <p>余额：15621</p>
                <p>充值：15621</p>
                <p>提现：15621</p>
            </div>
        </li> -->
    </ul>
    <div class="tags" style="display:none;">
        <div style="width:120px;height:120px;border:solid 3px #000;">
            <!-- 这是一个标签节点
            <div class="line" style="height:4px;width:120px;background:#000;position: absolute;margin-left:-100%;top:50%;margin-top:-1px;"></div> -->
        </div>
    </div>
    <div id="box">
        <div id="chart" class="orgChart"></div>
    </div>
    <script>
        function test(){
        	var keyword = $('input[name=keyword]').val();
        	if(keyword){
        		$.ajax({
                    type: 'post',
                    url: 'https://www.becoinapp.com/api/home/index/index',
                    data: {keyword:keyword},
                    success:function(res){
                        console.log(res)
                        var html = '';
						html += '<li class="'+res.data.id+'">';
						html += '<div>';
						html += '<p>手机：'+res.data.mobile+'</p>';
						html += '<p>邮箱：'+res.data.user_email+'</p>';
						html += '<p>等级：'+res.data.level+'</p>';
						html += '<p>有效用户：'+res.data.valid+'</p>';
						html += '<p>董事：'+res.data.director+'</p>';
						html += '<p>总业绩：'+res.data.achievement+'</p>';
						html += '<p>待结算业绩：'+res.data.turnover+'</p>';
						html += '<p>余额：'+res.data.balance+'</p>';
						html += '<p>充值：'+res.data.chongzhi+'</p>';
						html += '<p>提现：'+res.data.tixian+'</p>';
						html += '</div>';
                        var json = res.data.children;
                        html += '<ul>';
                        for(var key in json){
                            html += '<li class="'+json[key]['id']+'"><div>';
                            html += '<p>手机：'+json[key]['mobile']+'</p>';
                            html += '<p>邮箱：'+json[key]['user_email']+'</p>';
                            html += '<p>等级：'+json[key]['level']+'</p>';
                            html += '<p>有效用户：'+json[key]['valid']+'</p>';
                            html += '<p>董事：'+json[key]['director']+'</p>';
                            html += '<p>总业绩：'+json[key]['achievement']+'</p>';
                            html += '<p>待结算业绩：'+json[key]['turnover']+'</p>';
                            html += '<p>余额：'+json[key]['balance']+'</p>';
                            html += '<p>充值：'+json[key]['chongzhi']+'</p>';
                            html += '<p>提现：'+json[key]['tixian']+'</p>';
                            html += '</div></li>';
                        }
                        html += '</ul>';
						html += '</li>';

						$('#org').html(html);
						console.log($('#org').html())
						$('#chart').html('')
			            $("#org").jOrgChart({
			                chartElement: '#chart',
			                dragAndDrop: true
			            });
                    }
                });
        	}
            $('#chart').html('')
            $("#org").jOrgChart({
                chartElement: '#chart',
                dragAndDrop: true
            });
        }

        jQuery(document).ready(function() {
            $("#box").Tdrag();
            /* Custom jQuery for the example */
            $("#show-list").click(function(e) {
                e.preventDefault();
                $('#list-html').toggle('fast', function() {
                    if ($(this).is(':visible')) {
                        $('#show-list').text('Hide underlying list.');
                        $(".topbar").fadeTo('fast', 0.9);
                    } else {
                        $('#show-list').text('Show underlying list.');
                        $(".topbar").fadeTo('fast', 1);
                    }
                });
            });

            $('#list-html').text($('#org').html());

            $("#org").bind("DOMSubtreeModified", function() {
                $('#list-html').text('');
                $('#list-html').text($('#org').html());
                // prettyPrint();
            });

            var scaleflag = 0.5
            function zoomimg(event){
                var delta = 0;
                if (!event) event = window.event;
                if (event.wheelDelta) {
                    delta = event.wheelDelta/120; 
                    if (window.opera) delta = -delta;
                } else if (event.detail) {
                    delta = -event.detail/3;
                }
                if (delta > 0) {
                    console.log('放大图片的操作');
                    // var width = top.$('img[onmousewheel]').width();
                    // top.$('img[onmousewheel]').width(width*1.1)
                    if(scaleflag < 1){
                        scaleflag = scaleflag + 0.01
                        $('#chart').css('transform','scale('+ scaleflag +')')
                    }
                } else if (delta < 0) {
                    console.log('缩小图片的操作');
                    if(scaleflag > 0.2){
                        scaleflag = scaleflag - 0.01
                        $('#chart').css('transform','scale('+ scaleflag +')')
                    }
                    
                    // var width = top.$('img[onmousewheel]').width();
                    // if (width > 400) {
                    //     top.$('img[onmousewheel]').width(width * 0.9);
                    // }
                }
            }
              
            if (window.addEventListener)
                window.addEventListener('DOMMouseScroll', zoomimg, false);
            window.onmousewheel = document.onmousewheel = zoomimg;
        });
    </script>
</body>
</html>